Skip to content

fix: minor UI and styling tweaks #126

Jump to bottom
Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

fix: minor UI and styling tweaks #126

wants to merge 16 commits into from
+78 −27

Conversation

hestro
Copy link
Member

@hestro hestro commented Nov 11, 2026

This PR adds a set of small UI, styling and accessibility fixes:

  • Add the missing breadcrumb to the books page
  • Add a role and aria-label to the rating text on book cards, so screen readers announce it as a rating
  • Remove the "rating" word from book card ratings on the profile page, where the smaller cards made the text wrap awkwardly
  • Set color-scheme for light and dark mode, which reduces the light blue autofill background on the search input in dark mode
  • Tweak the selected book layout
  • Make it clearer what "unknown" on the cards mean
  • Set a dynamic page title on the selected book page, using <title> in the component instead of meta, since the title depends on data about the book

Closes #125
Closes #96

hestro added 10 commits November 11, 2026 16:27
@hestro
fix: add missing breadcrumb to books page
8ef7172 
Add a BooksBreadcrumb function that renders PageBreadcrumb with Home and
Books. It is a separate function because
the breadcrumb is needed in every return of the component
@hestro
feat: add role and aria-label to book card rating text
60a92ad
@hestro
fix: remove "rating" text from book card rating on profile page
48cc51c 
The cards are smaller on the profile page, which made the rating text
wrap awkwardly
@hestro
fix: set color-scheme so search input autofill fits dark mode
0b17f83 
Chrome painted a light blue autofill background on the search input when a previous search was picked in dark mode.
With a color-scheme for light and dark mode the browser uses matching native styling.
This does not remove the autofill tint completely, but it is much better in both themes.
@hestro
fix: keep book card height fixed on large screens
c897d24
@hestro
fix: match right-hand card heights to the cover card on large screens
8d92b71
@hestro
fix: reduce gap in header
d4fa3f0
@hestro
fix: make it clearer what "unknown" means on book cards
5aa6d1a
@hestro
feat: set dynamic page title on selected book page
29cc3f5 
Render a title in the selected book page component instead of exporting meta, since the title depends on the book data that is defined dynamically in the route. React 19 "hoists" the tag into the head, so the tab title updates with the book.
@hestro
test: Update books test and BookCard snapshot to pass all tests
2e61a4c
@hestro hestro added the enhancement New feature or request label Nov 11, 2026
@hestro hestro added this to the Deliverable 4 milestone Nov 11, 2026
@hestro hestro self-assigned this Nov 11, 2026
@hestro hestro marked this pull request as ready for review November 11, 2026 19:05
@hestro hestro requested a review from a team as a code owner November 11, 2026 19:05
@hestro
Copy link
Member Author

hestro commented Nov 11, 2026

I also noticed our drop-downs currently don't use cursor: pointer, unlike our other buttons. I could add cursor: pointer to them as well if we want it - what do you think?

martakam
martakam reviewed Nov 11, 2026
View reviewed changes
@martakam
Copy link
Member

I also noticed our drop-downs currently don't use cursor: pointer, unlike our other buttons. I could add cursor: pointer to them as well if we want it - what do you think?

Good catch, we should add that as well

@hestro
Copy link
Member Author

hestro commented Nov 12, 2026

I have removed the duplicate title from root.tsx and made sure all dropdowns use cursor: pointer, matching our other buttons.

I also added a log out button to the profile page, since it felt like a logical feature to have there.

@johahor
Copy link
Member

johahor commented Nov 12, 2026

Removing this fixed the duplicate titles 👍 but now nothing sets a title on the 404/error page: root has no meta, and ErrorBoundary is the only error boundary. On /project2/finnes-ikke the tab just shows the URL and document.title is empty (WCAG 2.4.2 Page Titled).

Could you add a title in ErrorBoundary?

<title>{`${message === "404" ? "Page not found" : "Error"} | Readr`}</title>

(A meta export in root would bring the duplicate back on the book page, since selectedBook has no meta and would inherit it.)

This comment was written with help of AI

@hestro @johahor
fix: add page title to the error boundary
abfb128 
Co-authored-by: Johannes Horn <johahor@stud.ntnu.no>
@hestro
Copy link
Member Author

hestro commented Nov 12, 2026

Good catch @johahor , should be fixed now

@martakam
Copy link
Member

(Just FYI: The CI checks will not run until all merge conflicts are solved)

martakam
martakam approved these changes Nov 12, 2026
View reviewed changes
Copy link
Member

@martakam martakam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for dealing with these issues!

Sign in to join this conversation on GitHub.
Reviewers

@martakam martakam martakam approved these changes

Assignees

@hestro hestro

Labels
enhancement New feature or request
Projects
None yet
Milestone
Deliverable 4
Development

Successfully merging this pull request may close these issues.

fix: minor UI and styling tweaks feat: make it clear what "unknown" on the cards mean
3 participants
@hestro @martakam @johahor